<template>
  <div class="info">
    <div class="head">
      <div>学生信息</div>
    </div>
    <div class="block">
      <ul>
        <li class="item">
          <span class="item_l">姓名</span>
          <span>{{studentInfo.name}}</span>
        </li>
        <li class="item">
          <span class="item_l">性别</span>
          <span>{{studentInfo.sex | sexFilter}}</span>
        </li>
        <li class="item">
          <span class="item_l">出身日期</span>
          <span>{{studentInfo.birth | timeFormat('yyyy-MM-dd')}}</span>
        </li>
        <li class="item">
          <span class="item_l">证件类型</span>
          <span>{{studentInfo.idType | idTypeFilter}}</span>
        </li>
        <li class="item">
          <span class="item_l">证件号码</span>
          <span>{{studentInfo.cardNo}}</span>
        </li>
        <li class="item">
          <span class="item_l">家庭住址</span>
          <span>{{`${province}${city?'-':''}${city}${county?'-':''}${county}`}}</span>
        </li>
        <li class="item">
          <span class="item_l">详细地址</span>
          <span>{{studentInfo.address}}</span>
        </li>
        <li class="item">
          <span class="item_l">级别</span>
          <span>{{studentInfo.gradeYear}}级</span>
        </li>
        <li class="item">
          <span class="item_l">班级</span>
          <span>{{studentInfo.className}}</span>
        </li>
        <!-- <li class="item">
          <span class="item_l">学号</span>
          <span>{{studentInfo.infoNo}}</span>
        </li> -->
        <li class="item">
          <span class="item_l">父/母姓名</span>
          <span>{{studentInfo.guardian}}</span>
        </li>
        <li class="item">
          <span class="item_l">联系电话</span>
          <span>{{studentInfo.mobile}}</span>
        </li>
        <li class="item">
          <span class="item_l">自定义信息1</span>
          <span>{{studentInfo.customField1}}</span>
        </li>
        <li class="item">
          <span class="item_l">自定义信息2</span>
          <span>{{studentInfo.customField2}}</span>
        </li>
        <li class="item">
          <span class="item_l">自定义信息3</span>
          <span>{{studentInfo.customField3}}</span>
        </li>
      </ul>  
    </div>
    <!-- <div class="footer" style="margin-top: 50px" v-if='!deleted'>
      <el-button type="primary" @click="goPage(2)">修改</el-button>
    </div> -->
  </div>
</template>
<script>
import {getStudentDetail} from 'api/school/student/index'
import {getProvince, getCity, getCounty} from 'api/common/index'
import common from 'src/util/common'
export default {
  data () {
    return {
      id: common.params('id'), // 学生id
      deleted: common.params('deleted'), // 是否是退学的学生 0; 正常学生 2: 退学的学生
      studentInfo: {}, // 学生信息
      province: '', // 省
      city: '', // 市
      county: '' // 区
    }
  },
  created () {
    getStudentDetail({id: this.id}).then(v => {
      this.studentInfo = v.data
      if (this.studentInfo.province) {
        getProvince().then(v => { // 省
          this.province = v.data[this.studentInfo.province].name
        })
        getCity({pid: this.studentInfo.province}).then(v => { // 市
          this.city = v.data[this.studentInfo.city].name
        })
        getCounty({pid: this.studentInfo.city}).then(v => { // 区
          this.county = v.data[this.studentInfo.county].name
        })
      }
    })
  },
  methods: {
    goPage (index) {
      switch (index) {
        case 1:
          this.$router.go(-1)
          break
        case 2:
          this.$router.push({name: 'studentEdit', query: {id: this.id}})
          break
      }
    }
  }
}
</script>
<style lang="less" scoped>
  .info {
    padding-left: 20px;
    font-size: 14px;
    .head {
      height: 60px;
      line-height: 60px;
      border-bottom: 1px solid #bfcbd9;
      margin-bottom: 20px;
      display: flex;
      justify-content: space-between;
    }
    .item {
      color: #1f2d3d;
      display: flex;
      span {
        display: inline-block;
        height: 50px;
        line-height: 50px;
        text-align: left;
      }
      .item_l {
        width: 150px;
        color: #AEAEAE;
      }
      .ltem_r {
        flex: 1;
        color: #666666;
      }
    }
  }
</style>

